<template>
  <div class="tag goods-skus-tag">
    <span v-for="(item, index) in data" :key="index" class="tag-item">
      <span>{{ item }}</span>
      <a><i class="el-icon-close el-icon--right" @click="$emit('deleteTagBtn', index)" /></a>
    </span>
    <el-input v-if="addTagShow === false" ref="tagInput" v-model="tag" size="mini" @blur="$emit('blurFn',tag)" />
    <el-button v-else plain size="mini" icon="el-icon-plus" @click="addTagBtn">添加值</el-button>
  </div>
</template>

<script>
export default {
  name: 'GoodsSkusTag',
  props: {
    data: {
      type: [Object, Array, String],
      default: () => {}
    },
    addTagShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tag: ''
    }
  },
  methods: {
    // 添加规格值
    addTagBtn() {
      this.$emit('update:addTagShow', false)
      this.$nextTick(() => {
        this.$refs.tagInput.focus()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tag {
    display: flex;
    align-items: center;

    .el-input {
        width: 100px;

    }

    .tag-item {
        display: flex;
        align-items: center;
        margin-right: 10px;
        border: 1px solid #d9ecff;
        background-color: #ecf5ff;
        border-radius: 5px;
        font-size: 10px;
        color: #409eff;
        height: 28px;
        padding: 0 5px;

        a {
            i {
                border-radius: 50%;
                padding: 1px;

                &:hover {
                    background-color: #409eff;
                    color: #fff;
                }
            }
        }
    }
}
</style>
